$(document).ready(function(){
    $('#persoonBeheerKnoppen').on('click','a',function(e){
       e.preventDefault();
       //if(!(this))
       var pagina =$(this).attr('href');
       persoonBeheer.pagina = pagina;
       persoonBeheer.getPagina(pagina);
    });
    persoonBeheer.getPagina(0);
    $('#persoonBeheerInhoud').on('click','a',function(e){
       e.preventDefault();
       var id =$(this).attr('id').split('_')[1];
       persoonBeheer.getInfo(id);
    });
    $('#persoonbeheerFilter').bind({
        click:function(){
            if(!ajax.bezig){
                persoonBeheer.filter();
            }
        }
    });
});
var persoonBeheer={
    lijst :['id','naam','aanhef','email','geborenop','datumnieuw','datumbezoek','status'],
    weergave:['id','naam','aanhef','email','geborenop','datumnieuw','datumbezoek','status'],
    weergaveStandaard:['id','naam','aanhef','email','geborenop','datumnieuw','datumbezoek','status'],
    sorteren:['naam:ASC','aanhef:','email:','datumnieuw:','datumbezoek:','geborenop:','status:'],
    sorterenStandaard:['naam:ASC','aanhef:','email:','datumnieuw:','datumbezoek:','geborenop:','status:'],
    
    //op:0 geen actie,1 naam,2 e-mail
    //zoek term
    //optie:0 begin met,1 bevat,2 eindigt op
    zoek:[0,'',0],
    zoekStandaard:[0,'',0],
    filteren:[],
    geselecteerd:[],
    weergaveActie:0,
    pagina:0
};
persoonBeheer.getPagina=function(pagina){
    if(ajax.bezig)return;
    ajax.bezig=true;
    persoonBeheer.getGeselecteerd();
    if(!pagina)pagina=0;
    $('#ajaxLoader').show();
    $('#actiebalk button').prop('disabled','disabled');
    var fd = new FormData();
    fd.append('pagina',pagina);
    ajax.oAjax = $.ajax({
       url:'/_PersoonBeheer/Index/getPagina/1',
       type:'post',
       dataType:'json',
       data:fd,
       processData: false,
       contentType: false,
       cache:false,
       success:persoonBeheer.succes,
       error:persoonBeheer.mislukt,
       timeout:ajax.timeout      
    });
};

persoonBeheer.succes = function(data){
    if(data.resultaat){
        persoonBeheer.tabel(data.personen);
        persoonBeheer.setGeselecteerd();
        persoonBeheer.knoppen(data.aantalPaginas,data.pagina,data.knopAantal);
    }
    ajax.oAjax.abort();
    $('#ajaxLoader').hide();
    $('#actiebalk button').removeAttr('disabled');
    ajax.reset();
    $('html,body').animate({scrollTopp:0},{duration:500});
};
persoonBeheer.mislukt = function(jQXHR,jQMsg){
    ajax.oAjax.abort();
    $('#ajaxLoader').hide();
    $('#actiebalk button').removeAttr('disabled');
    ajax.reset();
};
persoonBeheer.tabel = function(personen){
    $('#persoonBeheerInhoud').html('');
    var tabel =$('<table>').addClass('table table-striped');
    //-- tabel head
    var thead =$('<thead>');
    var tr =$('<tr>');
    for(var i = 0; i< persoonBeheer.weergave.length;i++){
        var kolom = persoonBeheer.weergave[i];
        if(kolom === 'id'){
            $(tr).append($('<th>').append($('<input>').attr('type','checkbox').attr('id','selecteer_alles')));
        }else{
            $(tr).append($('<th>').text(kolom));
        }
    }
    $(tabel).append($(thead).append(tr));
    var tbody = $('<tbody>');
    for(var j =0;j<personen.length;j++){
        var persoon = personen[j];
        var tr =$('<tr>');
        for(var i = 0; i< persoonBeheer.weergave.length;i++){
            var kolom = persoonBeheer.weergave[i];
            if(kolom === 'id'){
                $(tr).append($('<td>').append($('<input>').attr('type','checkbox').attr('id','id_'+persoon['id']).addClass('selecteer')));
            }else if(kolom ==='status'){
                status = parseInt(persoon[kolom]);
                switch(status){
                    case 1: status= 'niet actief';
                        break;
                        case 2:status= 'geblockkeerd';
                        break;
                    default: status= 'actief';
                }
                $(tr).append($('<td>').text(status));
            }else{
                if(kolom==='naam'){
                    $(tr).append($('<td>').append($('<a>').addClass('toonInfo')
                                                          .attr('id',['toonInfo',persoon['id']].join('_'))
                                                          .text(persoon[kolom])));
                }else{
                    $(tr).append($('<td>').text(persoon[kolom]));
                }
            }
        }
        $(tabel).append($(tbody).append(tr));
    }
    //-- tabel body
    $('#persoonBeheerInhoud').append(tabel);   
};
persoonBeheer.knoppen = function(aantalPaginas,pagina,knopAantal){
    $('#persoonBeheerKnoppen').html('');
    var aantalPaginas = parseInt(aantalPaginas);
    var pagina = parseInt(pagina);
    var knopAantal = parseInt(knopAantal);
    var linksRechts = Math.floor(knopAantal / 2);
    var pVan = 0;
    var pTot = 0;
    var ul = $('<ul>').addClass('pagination');
    if(aantalPaginas >1){
        pVan = pagina - linksRechts;
        if(pVan <0){
            pVan =0;
            pTot = knopAantal -1;
        }else{
            pTot = pVan + knopAantal -1;
        }
        if(pTot >=aantalPaginas){
            pTot = aantalPaginas - 1;
            var tmp = pTot - knopAantal +1;
            if(tmp >= 0 && pVan > tmp ){
                pVan = tmp;
            }
        }
        if(pVan >0){
            $(ul).append($('<li>').append($('<a>').attr('href',0).html('&laquo;')));
        };
        for(var t = pVan; t<= pTot;t++){
            var li = $('<li>');
            if(t=== pagina){
                $(li).addClass('active');
            }
            $(li).append($('<a>').attr('href',t).text(t+1));
            $(ul).append(li);
        };
        if(pTot < aantalPaginas-1){
            $(ul).append($('<li>').append($('<a>').attr('href',aantalPaginas - 1).html('&raquo;')));
        };
        $('#persoonBeheerKnoppen').append(ul);
    }
};
persoonBeheer.getGeselecteerd = function(){
    $('persoonBeheerInhoud input').each(function(ndx,el){
        persoonBeheer.geselecteerd[$('el').attr('id')]=$(el).is(':checked'); 
    });
};
persoonBeheer.setGeselecteerd = function(){
    $('persoonBeheerInhoud input').each(function(ndx,el){
        $(el).attr('checked',persoonBeheer.geselecteerd[$(el).attr('id')]); 
    });
}
/* --- info persoon --- */
persoonBeheer.getInfo= function(id){
    if(ajax.bezig)return;
    ajax.bezig=true;
    $('#dialoog').html('')
                 .append($('#ajaxLoader img').clone().css({display:'block',margin:'10px auto'}))
                 .append($('<p>').text('even geduld... informatie wordt opgehaald'))
                 .dialog({
                    modal : true,
                    draggable:false,
                    title:'Persooninfo wordt opgehaald',
                    resizable:false,
                    closeOnEscape:false,
                    create: function(e,ui){$('.ui-dialog-titlebar-close').hide();}
                 });
    var fd = new FormData();    
    fd.append('id',id);
    ajax.oAjax = $.ajax({
       url:'/_PersoonBeheer/Index/getInfo/1',
       type:'post',
       dataType:'json',
       data:fd,
       processData: false,
       contentType: false,
       cache:false,
       success:persoonBeheer.getInfoSucces,
       error:persoonBeheer.getInfoMislukt,
       timeout:ajax.timeout
    });
    
    //TODO  *** chcke
    fd.append('pagina',pagina);
    fd.append('zoekop',persoonBeheer.zoek[0]);
    fd.append('zoekterm',persoonBeheer.zoek[1]);
    fd.append('zoekoptie',persoonBeheer.zoek[2]);
    fd.append('sorteren',sorteren);
    
    
   if(persoonBeheer.weergaveActie>0){
       var geselecteerd = [];
       for(var i in  persoonBeheer.geselecteerd){
           if(persoonBeheer.geselecteerd[i]){
               var tmp = i.split('_');
               geselecteerd.push(tmp[1]);
           }
       }
       geselecteerd = geselecteerd.join(',');
       fd.append('geselecteerd',geselecteerd);
       fd.append('weergaveactie',persoonBeheer.weergaveActie);
   }
};
persoonBeheer.getInfoSucces = function(data){
    $('#dialoog').dialog('close').dialog('destroy').html('');
    if(data.resultaat){
            // algemene info
            var tabAlgemeen = $('<div>').attr('id','dialoogTabsAlgemeen').css('position','relative');
                for(var ndx in data.info){
                    var nfo = data.info[ndx];
                        nfo = nfo?nfo:'-';
                    if(ndx ==='foto'&& nfo.length >5){
                        var item =$('<img>').attr('src',data.webroot +nfo)
                                .css({position: 'absolute',
                                      right:'10px',
                                      top : '10px',
                                      width: '100px',
                                  heigth: 'auto'});
                       $(tabAlgemeen).append(item);
                    }else{
                        var item = $('<div>').text(nfo)
                                .prepend($('<span>').html(' &nbsp;&nbsp;'))
                                .prepend($('<br>'))
                                .prepend($('<small>').css({color:'#666'}).text(ndx));    
                       $(tabAlgemeen).append(item);
                    }
                }
            //adres
            var tabAdres = $('<div>').attr('id','dialoogTabsAdres');
            if(data.adres){
                var adressen =['H','D','W'];
                for(var i in adressen){
                    var adresSoort =adressen[i];
                    var adresInfo = data.adres[adresSoort];
                    if (adresInfo){
                        var adresInhoud = $('<fieldset>');
                        if(adresSoort ==='H'){
                            $(adresInhoud).append($('<legend>').text('Adres thuis'));
                        }else if(adresSoort ==='D' ) {
                            $(adresInhoud).append($('<legend>').text('Lever adres'));
                        }else if (adresSoort ==='W'){
                            $(adresInhoud).append($('<legend>').text('Adres werk'));
                        }
                        for(var j in adresInfo){
                            $(adresInhoud).append($('<div>').html(' &nbsp;&nbsp;' +adresInfo[j] )
                                    .prepend($('<br>'))
                                    .prepend($('<small>').text(j)));
                        }
                        //console.log(adresInhoud);
                        $(tabAdres).append(adresInhoud).append($('<p>').html('&nbsp;'));
                    }
                }
            }
        //groep
        var tabGroep = $('<div>').attr('id','dialoogTabsGroep');

        if(data.groep){
              var inclGroep = $('<fieldset>').append($('<legend>').text('Lid van'));
              var exclGroep = $('<fieldset>').append($('<legend>').text('Geen lid van'));
              for (var i in data.groep){
                  var groep = data.groep[i];
                  if(parseInt(groep[1])===1){
                      $(inclGroep).append($('<div>').text(groep[0]));
                  }else{
                      $(exclGroep).append($('<div>').text(groep[0]));
                  }

              }
              $(tabGroep).append(inclGroep)
                          .append($('<p>').html('&nbsp;'))
                          .append(exclGroep);
        }
        //medewerker
        
        var tabMedewerker = $('<div>').attr('id','dialoogTabsMedewerker');

        if(data.medewerker){
              var inclMedewerker = $('<fieldset>').append($('<legend>').text('Lid van'));
              var exclMedewerker = $('<fieldset>').append($('<legend>').text('Geen lid van'));
              for (var i in data.medewerker){
                  var medewerker = data.medewerker[i];
                  if(parseInt(medewerker[1])===1){
                      $(inclMedewerker).append($('<div>').text(medewerker[0]));
                  }else{
                      $(exclMedewerker).append($('<div>').text(medewerker[0]));
                  }
              }
              $(tabMedewerker).append(inclMedewerker)
                          .append($('<p>').html('&nbsp;'))
                          .append(exclMedewerker);
        }
        //tabs
        var tabs = $('<div>').attr('id','dialoogTabs')
                .append($('<ul>').append($('<li>').append($('<a>').attr('href','#dialoogTabsAlgemeen').text('Algemeen')))
                                  .append($('<li>').append($('<a>').attr('href','#dialoogTabsAdres').text('Adres')))
                                  .append($('<li>').append($('<a>').attr('href','#dialoogTabsGroep').text('Groep')))
                                  .append($('<li>').append($('<a>').attr('href','#dialoogTabsMedewerker').text('Medewerker'))))
                .append(tabAlgemeen)
                .append(tabAdres)
                .append(tabGroep)
                .append(tabMedewerker);
        var breedte = $(window).width();
            breedte = breedte > 600?580:breedte-20;
        var hoogte= $(window).height();
            hoogte = hoogte > 520?500:hoogte-20;
        //$('html,body').    
        $('#dialoog').append(tabs)
                     .dialog({
                         draggeble:false,
                         modal: true,
                         title:'Persoon detail informatie',
                         resible:false,
                         closeOnEscape:false,
                         width:breedte,
                         height:hoogte,
                         buttons:{
                             sluiten:function(){
                                 $('#dialoog').dialog('close').dialog('destroy').html('');
                             }
                         },
                         create:function(e ,ui){
                             $('.ui-dialog-titlebar-close').hide(); 
                         }
                     });
                     $('#dialoogTabs').tabs({
                        heightStyle:'fill' 
                     });
                     
    }
    ajax.reset();
};
persoonBeheer.getInfoMislukt = function(JQXHR,jQMsg){
    ajax.oAjax.abort();
    $('#ajaxLoader').hide();
    $('#actiebalk button').removeAttr('disabled');
    ajax.reset();
}
/*--- fitler ---*/
persoonBeheer.filter= function (){
    // velden weergeven / verbergen
    var veldenWeergeven=$('<ul>').attr('id','veldenWeergeven').addClass('sorteerbaar');
    var veldenVerbergen=$('<ul>').attr('id','veldenVerbergen').addClass('sorteerbaar');
    for(var i in persoonBeheer.lijst ){
        var veld= persoonBeheer.lijst[i];
        if(veld ==='id'||veld ==='naam'){
            continue;
        }
        if(persoonBeheer.weergave.indexOf(veld)> -1){
            $(veldenWeergeven).append($('<li>').addClass('ui-state-default').text(veld));
        }else{
            $(veldenVerbergen).append($('<li>').addClass('ui-state-default').text(veld));
        }
    }
    var tabVelden = $('<div>').attr('id','dialoogTabVelden')
            .append(veldenWeergeven)
            .append(veldenVerbergen)
            .append($('<br>').addClass('clear'));
    //zoeken
    var tabZoeken = $('<div>').attr('id','dialoogTabZoeken');
    // -1- zoeken op geen actie |naam|email|
    var termen = ['geen actie','naam','e-mail'];
    var container =$('<p>').attr('id','dialoogTabZoekenOp');
    for(var i  in termen){
        var term =  termen[i];
        var input = $("<input>").addClass('zoeken')
                                        .attr('type','radio')
                                        .attr('name','zoekop') 
                                        .attr('id','zoekop_'+i)    
                                        .val(i);
        if(i == persoonBeheer.zoek[0]){
            $(input).attr('checked','checked');
        }
        $(container).append($('<label>').attr('for',"zoekop_"+i)
                .html('&nbsp;'+term).prepend(input)).append($('<span>').html(' &nbsp;&nbsp;'));
    }
    $(tabZoeken).append(container);
    // -2- zoekterm
    $(tabZoeken).append($('<p>')
                .append($('<label>').attr('for','zoekterm')
                                    .text('zoekterm')
                                    .css({display:'inline-block',width:'20%'})))
                .append($('<input>').attr('type','text')
                                    .attr('id','zoekterm')
                                    .val(persoonBeheer.zoek[1])
                                    .css({width:'70%'}));
    // -3- zoek optie: begint met | bevat | eindigt op
     var termen = ['begint met','bevat','eindigt op'];
     var container =$('<p>').attr('id','dialoogTabZoekenOptie');
    for(var i  in termen){
        var term =  termen[i];
        var input = $("<input>").addClass('zoeken')
                                .attr('type','radio')
                                .attr('name','zoekoptie') 
                                .attr('id','zoekopie_'+i)    
                                .val(i);
        if(i == persoonBeheer.zoek[2]){
            $(input).attr('checked','checked');
        }
        $(container).append($('<label>').attr('for',"zoekoptie_"+i)
                .html('&nbsp;'+term).prepend(input)).append($('<span>').html(' &nbsp;&nbsp;'));
    }
    $(tabZoeken).append(container);
    //sorteren (vroeger filteren)
    var sorteren=$('<ul>').attr('id','sorteerVelden');
    for(var i in persoonBeheer.sorteren){
        var sorteer = persoonBeheer.sorteren[i];
            sorteer = sorteer.split(':');
        var glyph = 'glyphicon-sort';
        //TODO
        if(sorteer[1]==='ASC'){ glyph ='glyphicon-arrow-down';  }
        if(sorteer[1]==='DESC'){ glyph ='glyphicon-arrow-up';  }
        $(sorteren).append($('<li>').addClass('ui-state-default')
                .text(sorteer[0]).data('naam',sorteer[0])
                .data('sorteer',sorteer[1]).append($('<span>')
                .addClass('glyphicon').addClass(glyph).bind({
                    click: function(){
                        persoonBeheer.sorteerVolgorde($(this));
                    }
        })));    
    }
    var tabFilter = $('<div>').attr('id',"dialoogTabFilter").append(sorteren);
    
    //weergave geselecteerde items
    var tabWeergave = $('<div>').attr('id','dialoogTabWeergave');
    
    $(tabWeergave).append($('<p>').text(' Standaard weergave')
            .prepend($('<input>').attr('type','radio').attr('name','weergave')
            .attr('value',0).attr('checked','checked')));
    $(tabWeergave).append($('<p>').text(' Toon geselecteerde items')
            .prepend($('<input>').attr('type','radio').attr('name','weergave')
            .attr('value',1).attr('checked','checked')));
    $(tabWeergave).append($('<p>').text(' Toon niet-geselecteerde items')
            .prepend($('<input>').attr('type','radio').attr('name','weergave')
            .attr('value',2).attr('checked','checked')));
    $(tabWeergave).append($('<p>').text(' Deselecteer alles')
            .prepend($('<input>').attr('type','radio').attr('name','weergave')
            .attr('value',3).attr('checked','checked')));
    //weergave paneel
    var filterTabs = $('<div>').attr('id','dialoogTabs').append($('<ul>')
            .append($('<li>').append($('<a>').attr('href','#dialoogTabVelden').text('Velden')))
            .append($('<li>').append($('<a>').attr('href','#dialoogTabZoeken').text('Zoeken')))
            .append($('<li>').append($('<a>').attr('href','#dialoogTabFilter').text('Sorteren')))
            .append($('<li>').append($('<a>').attr('href','#dialoogTabWeergave').text('Weergeven')))
    )
    .append(tabVelden)
    .append(tabZoeken)
    .append(tabFilter)
    .append(tabWeergave)
    //weergave dialoogvenster
        var breedte = $(window).width();
            breedte = breedte > 600?580:breedte-20;
        var hoogte= $(window).height();
            hoogte = hoogte > 520?500:hoogte-20;
        //$('html,body').    
        $('#dialoog').append(filterTabs)
                     .dialog({
                         draggeble:false,
                         modal: true,
                         title:'Weergave & filters',
                         resible:false,
                         closeOnEscape:false,
                         width:breedte,
                         height:hoogte,
                         buttons:{
                             ok:function(){
                                 persoonBeheer.filterVelden();
                                 $('#dialoog').dialog('close').dialog('destroy').html('');
                                 persoonBeheer.getPagina(persoonBeheer.pagina);
                             },
                             Reset:function(){
                                 persoonBeheer.filterReset();
                                 $('#dialoog').dialog('close').dialog('destroy').html('');
                                 persoonBeheer.getPagina(persoonBeheer.pagina);
                             },
                             Annuleer:function(){
                                 $('#dialoog').dialog('close').dialog('destroy').html('');
                             }
                         },
                         create:function(e ,ui){
                             $('.ui-dialog-titlebar-close').hide(); 
                         }
                     });
                     $('#dialoogTabs').tabs({
                        heightStyle:'fill' 
                     });
                     $('#veldenWeergeven,#veldenVerbergen').sortable({
                                 connectWith:'.sorteerbaar'
                     }).disableSelection();
                     $('#sorteerVelden').sortable({});
};
persoonBeheer.filterReset= function (){
    persoonBeheer.lijst = [];
    persoonBeheer.weergave= [];
    for(var i in persoonBeheer.weergaveStandaard){
        persoonBeheer.lijst[i]=persoonBeheer.weergaveStandaard[i];
        persoonBeheer.weergave[i]=persoonBeheer.weergaveStandaard[i];
    }
    persoonBeheer.zoek=[];
    for(var i in persoonBeheer.zoekStandaard){
        persoonBeheer.zoek[i]= persoonBeheer.zoekStandaard[i];
    }
    persoonBeheer.sorteren=[];
    for(var i in persoonBeheer.zoekStandaard){
        persoonBeheer.sorteren[i]= persoonBeheer.zoekStandaard[i];
    }
    persoonBeheer.pagina =0;
    persoonBeheer.geselecteerd=[];
    persoonBeheer.getPagina(persoonBeheer.pagina);
};
persoonBeheer.filterVelden= function (){
    persoonBeheer.getGeselecteerd();
    persoonBeheer.weergave = ['id','naam'];
    persoonBeheer.lijst = ['id','naam'];
    var tel = 1;
    $('#veldenWeergeven li').each(function(ndx,el){
       tel++;
       persoonBeheer.weergave[tel]=$(el).text();
       persoonBeheer.lijst[tel]=$(el).text();
    });
    $('#veldenVerbergen li').each(function(ndx,el){
       tel++;
       persoonBeheer.lijst[tel]=$(el).text();
    });
    
    persoonBeheer.zoek[0]= parseInt($('.zoekop:checked').val());
    persoonBeheer.zoek[1]= $.trim($('#zoekterm').val());
    persoonBeheer.zoek[2]= parseInt($('.zoekoptie:checked').val());
    //console.log(persoonBeheer.weergave);
    //console.log(persoonBeheer.lijst);
    persoonBeheer.sorteren=[];
    $('#sorteerVelden li').each(function(ndx,el){
       var naam = $(el).data('naam');
       var richting = $(el).data('sorteer');
       var sorteer = [naam,richting].join(':');
       persoonBeheer.sorteren.push(sorteer);
    });
    persoonBeheer.weergaveActie = $('#dialoogTabWeergave input:checked').val();
    if(persoonBeheer.weergaveActie ==3){
        persoonBeheer.weergaveActie =0;
        persoonBeheer.geselecteerd=[];
        $('.selecteer').removeAttr('checked');
    };
};
persoonBeheer.sorteerVolgorde = function(el){
    var sorteer = $(el).parent().data('sorteer');
    if(sorteer ==="ASC"){
        $(el).parent().data('sorteer','DESC');
        $(el).attr("class",'').addClass('glyphicon glyphicon-arrow-up');
    }else if(sorteer ==="ASC"){
        $(el).parent().data('sorteer','');
        $(el).attr("class",'').addClass('glyphicon glyphicon-sort');
    }else if(sorteer ==="ASC"){
        $(el).parent().data('sorteer','ASC');
        $(el).attr("class",'').addClass('glyphicon glyphicon-arrow-down');
    }
    
};
